<template>
  <div>
      <h2>滚动定位页面</h2>
      <input type="range" min="0" max="1000" v-model="pinPadding">
       <p v-direct:[direction]="pinPadding">页面被定位到离本页{{ direction }}端{{ pinPadding }}像素</p>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
    setup () {
        const state = reactive({
            direction: 'right',
            pinPadding: 200
        })

        return {
            ...toRefs(state)
        }
    }
}
</script>

<style>

</style>